<script lang="ts" setup>
    import { User, Lock } from '@element-plus/icons-vue'
    import { ref } from 'vue';
    import { ElMention, ElMessage } from 'element-plus';

    const isRegister = ref(false);//用于控制注册表单与登录表单

    const registerData = ref({
        username: '',
        password: '',
        checkPassword: ''
    });


    //检查二次密码函数
    const checkPass = (rule,value,callback)=>{
        if(value===''){
            callback(new Error('密码不能为空!'))
        }else if(value !== registerData.value.password){
            callback(new Error('两次输入的密码不一致!'))
        }else{
            callback()
        }
    };


    // 表单校验规则
    const rules = {
        username: [
            {required:true,message:'账号不能为空!',trigger:'blur'},
            {min: 5,max: 16,message:'长度为5~16位字符!',trigger:'blur'}
        ],
        password: [
            {required:true,message:'密码不能为空!',trigger:'blur'},
            {min: 5,max: 16,message:'长度为5~16位字符!',trigger:'blur'}
        ],
        checkPassword: [
            {validator: checkPass, trigger:'blur'}
        ]
    };


    //调用注册登录接口
    import {userRegisterService, userLoginService} from '../../api/user.js'
    const register = async()=>{
        let result = await userRegisterService(registerData.value);
        // ElMessage.success(result.msg?result.msg:'注册成功')
    }

    //登录函数
    const login = async()=>{

      // console.log('Login Data:', registerData.value); 
      let result = await userLoginService(registerData.value);
        // ElMessage.success(result.msg?result.msg:'登录成功')
    }

    const clearRegisterData = ()=>{
      registerData.value.password = '',
      registerData.value.checkPassword = ''
    }
</script>

<template>
    <div class="login-wrapper">
      <div class="modal">
        <!-- 注册表单 -->
        <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
          <div class="title">注册</div>
          <el-form-item prop="username">
            <el-input type="text" placeholder="账号" :prefix-icon="User" v-model="registerData.username"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" :prefix-icon="Lock" v-model="registerData.password"/>
          </el-form-item>
          <el-form-item prop="checkPassword">
            <el-input type="password" placeholder="确认密码" :prefix-icon="Lock" v-model="registerData.checkPassword"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnLogin" auto-insert-space @click="register">注册</el-button><!--  -->
          </el-form-item>
            <el-button :underline="false" @click="isRegister = false;clearRegisterData()" link>返回登录</el-button>
        </el-form>


    

      <!-- 登录表单 -->
      <el-form ref="formRef" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
          <div class="title">欢迎！</div>
          <el-form-item prop="username">
            <el-input type="text" placeholder="账号" :prefix-icon="User" v-model="registerData.username"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" :prefix-icon="Lock" v-model="registerData.password"/>
          </el-form-item>
            <el-checkbox>记住账号</el-checkbox>
            <el-checkbox class="alignRight">记住密码</el-checkbox>
          <el-form-item>
            <el-button type="primary" class="btnLogin" auto-insert-space @click="login">登录</el-button><!--  -->
          </el-form-item>
            <el-button link>忘记密码</el-button>
            <el-button class="alignRight" :underline="false" @click="isRegister = true;clearRegisterData()" link>没有账号?立即注册</el-button>
      </el-form>


    </div>
  </div>
</template>

<style lang="scss">
.login-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
  .modal{
    width: 400px;
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    .title{
      font-size: 50px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30px;
    }
    .btnLogin{
      width: 100%;
    }
    .alignRight{
      float: right;
    }
  }
}
</style>